<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据源比对</title>
    <link rel="icon" href="/favicon1.ico" type="image/x-icon"/>
    <link rel="bookmark" href="/favicon1.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script src="js/base64.js"></script>
</head>
<body>
<a href="index.html">返回主页</a>
<a href="db.html">数据源管理</a>
<!-- -->
<div id="dbDiv" class="easyui-layout" style="width:1400px;height:250px;">
    <!--<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>-->
    <!--<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>-->

    <div data-options="region:'west',title:'原始数据库',split:true" style="width:600px;padding:5px;">

        <div>
            <label>名称:</label>
            <input id="sourceName" class="easyui-textbox" data-options="iconCls:'icon-none'" style="width:90px">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:100px" onclick="loadSourceDatabases()">查询</a>

        </div>

        <div>
            <label>数据库选择:</label>
            <input id="sourcDatabase" value="" style="width:200px">
        </div>
        <div>
            <label>JdbcUrl:</label>
            <input id="sourcDatabaseDetail" class="easyui-textbox" data-options="editable:false" style="width:500px">
        </div>

        <div>
            <label>表名模糊过滤:</label>
            <input id="sourceTableName" class="easyui-textbox" style="width:90px">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:100px" onclick="loadSourceTables()">查询</a>
        </div>


    </div>



    <div data-options="region:'east',title:'目标数据库',split:true" style="width:600px;padding:5px;">

        <div>
            <label>名称:</label>
            <input id="targetName" class="easyui-textbox" data-options="iconCls:'icon-none'" style="width:90px">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:100px" onclick="loadTargetDatabases()">查询</a>

        </div>

        <div>
            <label>数据库选择:</label>
            <input id="targetDatabase" value="" style="width:200px">
        </div>
        <div>
            <label>JdbcUrl:</label>
            <input id="targetDatabaseDetail" class="easyui-textbox" data-options="editable:false" style="width:500px">
        </div>

        <div>
            <label>表名模糊过滤:</label>
            <input id="targetTableName" class="easyui-textbox" style="width:90px">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:100px" onclick="loadTargetTables()">查询</a>
        </div>


    </div>



    <div data-options="region:'center',title:'库比较工具'" style="width:100px;padding:5px;background:#eee;">
        <br>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:180px"
               onclick="syncDatabase()">同步表结构-></a>

        </div>
        <br>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:180px"
               onclick="createSourceDic()">生成原始库数据字典</a>

        </div>
        <br>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:180px"
               onclick="createTargetDic()">生成目标库数据字典</a>

        </div>
    </div>
</div>
<!-- 表比较-->
<div id="tableDiv" class="easyui-layout" style="width:1400px;height:300px;">
    <!--<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>-->
    <!--<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>-->

    <div data-options="region:'west',title:'原始数据表',split:true" style="width:600px;">
        <table id="sourceDg" class="easyui-datagrid" title="" style="width:600px;height:270px">
            <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'tableName',width:150">表名</th>
                <th data-options="field:'tableComment',width:150">表注释</th>
                <th data-options="field:'createTime',width:180,align:'center'">创建时间</th>
            </tr>
            </thead>
        </table>
        <div id="toolbars">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="sourceTableStructure()">表结构</a>
        </div>

    </div>


    <div data-options="region:'east',title:'目标数据表',split:true" style="width:600px;">
        <table id="targetDg" class="easyui-datagrid" title="" style="width:600px;height:270px">
            <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'tableName',width:150">表名</th>
                <th data-options="field:'tableComment',width:150">表注释</th>
                <th data-options="field:'createTime',width:180,align:'center'">创建时间</th>
            </tr>
            </thead>
        </table>
        <div id="toolbart">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="targetTableStructure()">表结构</a>

            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addtargetTableStructure()">新增表结构</a>

        </div>


    </div>
    <div data-options="region:'center',title:'表比较工具'" style="width:100px;padding:5px;background:#eee;">

        <br>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:180px"  onclick="syncSelectTables()">同步已勾选表结构-></a>

        </div>
        <br>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:180px" onclick="syncSelectTablesDatas()">同步已勾选表数据-></a>

        </div>
        <br>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:180px" onclick="createSelectSTablesDic()">原始库表数据字典</a>

        </div>
        <br>
        <div>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:180px" onclick="createSelectDTablesDic()">目标库表数据字典</a>

        </div>
    </div>
</div>


<label>最大数据查询行数:</label><input id="dataLimit" class="easyui-numberspinner" value="50" style="width:100px;"
       required="required" data-options="min:10,max:1000,editable:false,increment:10">


<label>查询第一行选中原始表数据:</label>      <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:100px" onclick="loadSourceDatas()">查询</a>


<label>查询第一行选目标表数据:</label>      <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:100px" onclick="loadTargetDatas()">查询</a>

<!-- 数据比较-->

<div id="dataDiv" class="easyui-layout" style="width:1400px;height:300px;">
    <!--<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>-->
    <!--<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>-->

    <div data-options="region:'west',title:'原始表数据',split:true" style="width:600px;">
        <table id="sourceDatas" class="easyui-datagrid" title="" style="width:600px;height:280px">
        </table>
    </div>
    <div data-options="region:'east',title:'目标表数据',split:true" style="width:600px;">
        <table id="targetDatas" class="easyui-datagrid" title="" style="width:600px;height:280px">
        </table>

    </div>
    <div data-options="region:'center',title:'数据比较工具'" style="width:100px;padding:5px;background:#eee;">

        <br>
    </div>
</div>
<div id="Dialog" class="easyui-dialog"  data-options="closed: true">

    <input id="DialogMsg" class="easyui-textbox" name="message" data-options="multiline:true" style="width:1000px;height:300px"></input>
</div>

<iframe id="targetWeb" style="display: none" href=""></iframe>

<div id="dialogMessage" class="easyui-dialog" title="" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:200px;padding:10px">
    The dialog content.
</div>



<div id="DialogStructure" class="easyui-dialog" data-options="closed: true">
    <table id="structureDg" class="easyui-datagrid" title="" style="width:600px;height:270px">
        <thead>
        <tr>
            <th data-options="field:'ordinalPosition',width:45">排序</th>
            <th data-options="field:'columnName',width:150">字段名</th>
            <th data-options="field:'columnType',width:130">字段类型</th>
            <th data-options="field:'isNullable',width:100">可否为空</th>
            <th data-options="field:'columnComment',width:180">字段注释</th>
        </tr>
        </thead>
    </table>
</div>


        <script type="text/javascript">
            var sourcesDbId = null;
            var targetDbId = null;



            function addtargetTableStructure(){


            }


            $('#dialogMessage').dialog({
                title: '提示信息',
                width: 200,
                height: 100,
                closed: true,
                cache: false,
                modal: true
            });
            $('#DialogStructure').dialog({
                title: '表结构',
                width: 600,
                height: 300,
                closed: true,
                cache: false,
                modal: true
            });



            function createSourceDic(){
                if (sourcesDbId==null){
                    showMessage("请选择原始数据库");
                }else {
                    var url = "/datasourceconf/tables/dictionary?id="+sourcesDbId;
                  // $("#targetWeb").attr('href',url);

                    var iframe = document.getElementById("targetWeb");
                    iframe.contentWindow.location.href = url;
                }
            }

            function showMessage(msg) {
                $('#dialogMessage').html(msg);
                $('#dialogMessage').dialog('open');
            }

            function createTargetDic(){
                if (sourcesDbId==null){
                    showMessage("请选择目标数据库");
                }else {
                    var url = "/datasourceconf/tables/dictionary?id="+sourcesDbId;
                    // $("#targetWeb").attr('href',url);

                    var iframe = document.getElementById("targetWeb");
                    iframe.contentWindow.location.href = url;
                }
            }






            function syncSelectTables(){
                var rows=$('#sourceDg').datagrid('getSelections');

                if(rows.length==0){
                    showMessage("请选择原始数据表");
                }else {

                    var tableNames = "";

                    for (var i = 0; i < rows.length; i++) {
                        tableNames +=rows[i].tableName;
                        if (i<rows.length-1){
                            tableNames +=",";
                        }
                    }


                    var data = {
                        oldId:sourcesDbId,
                        newId:targetDbId,
                        tableNames:tableNames};
                    var str = jQuery.param( data );
                    var data = doGet('datasourceconf/compare/selectTables?' + str);


                    $('#DialogMsg').textbox('setValue',data.data);
                    $('#Dialog').dialog({
                        title: '同步脚本',
                        width: 1000,
                        height: 300,
                        closed: false,
                        cache: false,
                        modal: true
                    });
                }
            }

            function  syncSelectTablesDatas(){



                var rows=$('#sourceDg').datagrid('getSelections');

                if(rows.length==0){
                    showMessage("请选择原始数据表");
                }else {
                    var tableNames = "";
                    for (var i = 0; i < rows.length; i++) {
                        tableNames +=rows[i].tableName;
                        if (i<rows.length-1){
                            tableNames +=",";
                        }
                    }
                    var data = {
                        oldId:sourcesDbId,
                        newId:targetDbId,
                        tableNames:tableNames};
                    var str = jQuery.param( data );
                    var data = doGet('/datasourceconf/compare/tables/datas?' + str);

                    $('#DialogMsg').textbox('setValue',data.data);
                    $('#Dialog').dialog({
                        title: '同步脚本',
                        width: 1000,
                        height: 300,
                        closed: false,
                        cache: false,
                        modal: true
                    });
                }



            }

            function createSelectSTablesDic(){
                var rows=$('#sourceDg').datagrid('getSelections');
                if(rows.length==0){
                    showMessage("请选择原始库数据表");
                }else {
                    var tableNames = "";
                    for (var i = 0; i < rows.length; i++) {
                        tableNames += rows[i].tableName;
                        if (i < rows.length - 1) {
                            tableNames += ",";
                        }
                    }
                    var url = "/datasourceconf/tables/dictionary?id="+sourcesDbId+"&tableNames=" + tableNames;
                    var iframe = document.getElementById("targetWeb");
                    iframe.contentWindow.location.href = url;
                }
            }

            function  createSelectDTablesDic(){
                var rows=$('#targetDg').datagrid('getSelections');
                if(rows.length==0){
                    showMessage("请选择目标库数据表");
                }else {
                    var tableNames = "";
                    for (var i = 0; i < rows.length; i++) {
                        tableNames += rows[i].tableName;
                        if (i < rows.length - 1) {
                            tableNames += ",";
                        }
                    }
                    var url = "/datasourceconf/tables/dictionary?id="+targetDbId+"&tableNames=" + tableNames;
                    var iframe = document.getElementById("targetWeb");
                    iframe.contentWindow.location.href = url;
                }
            }

            function syncDatabase(){
                var data = {
                    oldId:sourcesDbId,
                    newId:targetDbId};
                var str = jQuery.param( data );
                var data = doGet('/datasourceconf/compare/tables?' + str);
                $('#DialogMsg').textbox('setValue',data.data);
                $('#Dialog').dialog({
                    title: '同步脚本',
                    width: 1000,
                    height: 300,
                    closed: false,
                    cache: false,
                    modal: true
                });
            }
            $('#structureDg').datagrid({
                loadFilter: function (data) {
                    var result = {
                        "total": data.data.length,
                        "rows": data.data
                    }
                    return result;
                }
            });

            function sourceTableStructure(){
                var table = $('#sourceDg').datagrid('getSelected');
                var tableName =  table.tableName;
                var data = {
                    id:sourcesDbId,
                    tableName:tableName};
                var str = jQuery.param( data );
                var data = doGet(' /datasourceconf/table/columns?' + str);

                // 原数据源表
                showTableStructure(tableName,data);
            }

            function showTableStructure(tableName,data){
                $('#DialogStructure').dialog({
                    title: tableName+'表结构'
                });
                $('#structureDg').datagrid('loadData', data);
                $('#DialogStructure').dialog('open');
            }

            function  targetTableStructure(){
                var table = $('#targetDg').datagrid('getSelected');
                var tableName =  table.tableName;
                var data = {
                    id:targetDbId,
                    tableName:tableName};
                var str = jQuery.param( data );
                var data = doGet(' /datasourceconf/table/columns?' + str);

                // 目标据源表
                showTableStructure(tableName,data);
            }


            // 源库
            $('#sourcDatabase').combobox({
                valueField: 'id',
                textField: 'name',
                onSelect: function (record) {
                    $("#sourcDatabaseDetail").textbox('setText', record.url);
                    sourcesDbId = record.id;
                }
            });
            // 原数据源表
            $('#sourceDg').datagrid({
                singleSelect:false,
                loadFilter: function (data) {
                    var result = {
                        "total": data.data.length,
                        "rows": data.data
                    }
                    return result;
                },
                toolbar: '#toolbars',
            });



            $('#targetDatabase').combobox({
                valueField: 'id',
                textField: 'name',
                onSelect: function (record) {
                    $("#targetDatabaseDetail").textbox('setText', record.url);
                    targetDbId = record.id;
                }
            });
            // 原数据源表
            $('#targetDg').datagrid({
                singleSelect:false,
                loadFilter: function (data) {
                    var result = {
                        "total": data.data.length,
                        "rows": data.data
                    }
                    return result;
                },
                toolbar: '#toolbart',
            });


            function loadSourceTables(){
                loadSourceTable(sourcesDbId, $("#sourceTableName").val(),"#sourceDg");
            }

            function loadTargetTables(){
                loadSourceTable(targetDbId, $("#targetTableName").val(),"#targetDg");
            }

            function loadSourceTable(id,tableName,tableId){
                var data = {
                    id:id,
                    tableName:tableName};
                var str = jQuery.param( data );
                var data = doGet('/datasourceconf/tables?' + str);
                $(tableId).datagrid('loadData', data);
            }

            function loadSourceDatas(){
                var table = $('#sourceDg').datagrid('getSelected');
                var tableName =  table.tableName;
                var data = {
                    id:sourcesDbId,
                    tableName:tableName,
                    limit:$("#dataLimit").val()};
                var str = jQuery.param( data );
                var data = doGet('/datasourceconf/table/datas?' + str);

                loadData(data.data,'#sourceDatas');
            }


            function loadTargetDatas(){
                var table = $('#targetDg').datagrid('getSelected');
                var tableName =  table.tableName;
                var data = {
                    id:targetDbId,
                    tableName:tableName,
                    limit:$("#dataLimit").val()};
                var str = jQuery.param( data );
                var data = doGet('/datasourceconf/table/datas?' + str);

                loadData(data.data,'#targetDatas');
            }

            /**
             * 加载源数据库列表
             */
            function loadSourceDatabases(){
                var data = {
                    pageNum:1,
                    numPerPage:10,
                    name:$("#sourceName").val()};
                var str = jQuery.param( data );
                var data = doGet('/datasourceconf/page?' + str);
                var arry = data.data.records;
                // for (var i = 0; i < arry.length; i++) {
                //     arry[i].name = arry[i].name;
                // }

                $("#sourcDatabase").combobox("clear");

                $("#sourcDatabase").combobox("loadData",arry);
            }

            /**
             * 加载源数据库列表
             */
            function loadTargetDatabases(){
                var data = {
                    pageNum:1,
                    numPerPage:10,
                    name:$("#targetName").val()};
                var str = jQuery.param( data );
                var data = doGet('/datasourceconf/page?' + str);
                var arry = data.data.records;
                // for (var i = 0; i < arry.length; i++) {
                //     arry[i].name = arry[i].name + "-" + arry[i].env;
                // }

                $("#targetDatabase").combobox("clear");

                $("#targetDatabase").combobox("loadData",arry);
            }



            /**
             * 加载数据表
             * @param data
             * @param datagirdId
             */
            function loadData(data,datagirdId) {
                if (data.length == 0) {
                    var rows = [{
                        message: '未返回数据'
                    }];
                    $(datagirdId).datagrid({
                        data: rows,
                        title: '查询结果',
                        iconCls: 'icon-search',
                        columns: [
                            [{
                                field: 'message',
                                title: 'message',
                                width: 200
                            }]
                        ]
                    });
                } else {
                    var obj = data[0];
                    var keys = Object.keys(obj);
                    var columns = [];
                    var tableCellWitdh = 150;
                    if( keys.length<=5){
                        tableCellWitdh=200;
                    }
                    for (var i = 0; i < keys.length; i++) {
                        var column = {};
                        column.field = keys[i];
                        column.title = keys[i];
                        column.width = tableCellWitdh;
                        columns.push(column);
                    }
                    $(datagirdId).datagrid({
                        data: data,
                        columns: [
                            columns
                        ]
                    });
                }
            }








            function doGet(url) {
                var result = null;
                $.ajax({
                    url: url,
                    type: 'get',
                    async: false,
                    headers: {
                        'Content-Type': 'application/json;charset=utf8;'
                    },
                    success: function (data) {
                        console.log(data);
                        result = data;
                    },
                    error: function (data) {
                        console.log("error");
                        console.log(data);
                    }
                });

                return result;
            }
        </script>
</body>
</html>
